<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  {{info}}
  <ul>
    <!--v-for循环遍历,遍历的同时生成当前元素-->
    <li v-for="name in arr">{{name}}</li>
  </ul>
  <table border="1">
    <caption>英雄列表1</caption>
    <tr>
      <th>名字</th><th>年龄</th><th>类型</th>
    </tr>
    <tr v-for="p in persons">
      <td>{{p.name}}</td><td>{{p.age}}</td><td>{{p.type}}</td>
    </tr>
  </table>
  <!-- 可以实现嵌套循环 -->
  <ul v-for="p in persons">
    <li v-for="(value, key, index) in p">
      {{ index }}. {{ key }}: {{ value }}
    </li>
  </ul>
  <!-- 指定循环的次数 -->
  <ul>
    <li v-for="n in 5" :key="n">
      {{ n }}
    </li>
  </ul>
</div>
<script src="js/vue.min.js"></script>
<script>
  let v = new Vue({
    el:"#app",
    data:{
      info:"循环遍历",
      arr:["诸葛亮","司马懿","赵云","曹操"],
      persons:[
		    {name:"诸葛亮",age:35,type:"军师"},
        {name:"司马懿",age:75,type:"军师"},
        {name:"赵云",age:32,type:"战士"}
      ]
    }
  })
</script>
</body>
</html>

